<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<style>
		body {
			background: #ddd;
		}
		
		.img-circle {
			margin: 0;
			padding: 0;
		}
		p{
			margin: 0;
		}
		.user-header {
			background: url(img/timg.jpg) fixed;
			background-size: 100% 100%;
			/*background: #7bdbff;
			/*background-size:100% 100%; */
		}
		
		.page-header {
			margin-top: 0;
			margin-bottom: 0;
		}
		
		.page-header h3,
		.page-header small {
			color: white;
		}
		
		.user-tx {}
		
		.clear {
			clear: both;
		}
		
		.tx-container {
			margin-top: 20px;
			padding: 0;
		}
		
		.tx-container img,
		.tx-container h3 {
			display: block;
			margin: 0 10px;
			padding: 0;
			float: left;
		}
		
		.tx-container h3 {
			margin: 30px 0 0 0;
		}
		
		.recent-hos {
			padding: 0;
			margin: 0;
			background: white;
		}
		
		.recent-hos-item {
			padding: 0 9px;
			margin: 0;
		}
		
		.recent-hos-title,
		.service-container-title {
			color: #8a8a8a;
			font-size: 80%;
			padding: 7px 0;
			margin-bottom: 5px;
			
		}
		.service-container-title
		{
			border-bottom: solid 1px #DDDDDD;
		}
		.recent-hos-item img {
			padding: 0 15px;
		}
		
		.recent-hos-item small {
			margin: auto;
			display: inline-block;
			padding: 0;
			font-size: 60%;
			line-height: 100%;
			color: #303030;
		}
		
		.thumbnail,
		.caption {
			display: inline-block;
			text-align: center;
			border: 0;
			margin: 0;
			padding: 0;
		}
		
		.thumbnail .caption {
			margin: 5px 0 0 0;
			padding: 0;
		}
		
		.service-container {
			background: white;
			margin: 0;
			padding: 0;
			margin-top: 10px;
		}
		
		.service-container-body {
			margin: 0;
			padding: 0;
		}
		
		.service-container-row {
			margin: 0;
			padding: 0;
		}
		
		.service-container-item {
			margin: 0;
			padding: 5px 10px;
			text-align: center;
		}
		
		.service-container-item section {
			float: left;
		}
		
		.service-container-item img {
			padding: 7px;
		}
		
		.service-container-item p {
			color: #303030;
			padding: 8px 5px;
			margin-bottom: 0;
			font-size: 85%;
			text-align: left;
		}
	</style>

	<body>

		<div class="page-header col-xs-12 user-header">
			<div class="tx-container col-xs-12">
				<img src="img/guhaku.jpg" class="img-circle user-tx col-xs-3">
				<h3>注册用户 </h3>
				<section class="clear"></section>
			</div>

			<small>Subtext for header</small>
		</div>

		<div class="row col-xs-12 recent-hos">
			<div class="col-xs-12">
				<p class="recent-hos-title">最近使用</p>
			</div>

			<div class="col-xs-3 recent-hos-item">
				<div class="thumbnail">
					<img src="img/ui/hos1.png" class="img-circle" alt="通用的占位符缩略图">
					<div class="caption">

						<small>中山大学附属第一医院</small>

					</div>
				</div>
			</div>
			<div class="col-xs-3 recent-hos-item">
				<div class="thumbnail">
					<img src="img/ui/hos2.png" class="img-circle" alt="通用的占位符缩略图">
					<div class="caption">

						<small>市人民医院</small>

					</div>
				</div>
			</div>
			<div class="col-xs-3 recent-hos-item">
				<div class="thumbnail">
					<img src="img/zw.jpg" class="img-circle" alt="通用的占位符缩略图">
					<div class="caption">

						<small>附属第二医院</small>

					</div>
				</div>
			</div>
			<div class="col-xs-3 recent-hos-item">
				<div class="thumbnail">
					<img src="img/zw.jpg" class="img-circle" alt="通用的占位符缩略图">
					<div class="caption">

						<small>省口腔医院</small>

					</div>
				</div>
			</div>

		</div>

		<div class="row col-xs-12 service-container">
			<div class="col-xs-12">
				<p class="service-container-title">看病就医</p>
			</div>

			<div class="col-xs-12 row service-container-body">
				<div class="col-xs-12 row service-container-row">
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/doc1.png" />
						<p class="col-xs-9">医院挂号</p>
					</section>
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/doc2.png" />
						<p class="col-xs-9">科室挂号</p>
					</section>
					<div class="clear"></div>
				</div>
				<div class="col-xs-12 row service-container-row">
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/doc3.png" />
						<p class="col-xs-9">急救服務</p>
					</section>
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/doc2.png" />
						<p class="col-xs-9">医疗信息</p>
					</section>
					<div class="clear"></div>
				</div>

			</div>

		</div>
		<div class="row col-xs-12 service-container">
			<div class="col-xs-12">
				<p class="service-container-title">公共资源</p>
			</div>
			<div class="col-xs-12 row service-container-body">
				<div class="col-xs-12 row service-container-row">
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/insurance.png" />
						<p class="col-xs-9">社会保险</p>
					</section>
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/accumulationFund.png" />
						<p class="col-xs-9">公积金</p>
					</section>
					<div class="clear"></div>
				</div>
			</div>
		</div>
			
		<div class="row col-xs-12 service-container">
			<div class="col-xs-12">
				<p class="service-container-title">车辆服务</p>
			</div>

			<div class="col-xs-12 row service-container-body">
				<div class="col-xs-12 row service-container-row">
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/violation.png" />
						<p class="col-xs-9">交通违法</p>
					</section>
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/park.png" />
						<p class="col-xs-9">停车</p>
					</section>
					<div class="clear"></div>
				</div>
			</div>
			<div class="col-xs-12 row service-container-body">
				<div class="col-xs-12 row service-container-row">
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/accident.png" />
						<p class="col-xs-9">挪车</p>
					</section>
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/carFind.png" />
						<p class="col-xs-9">机动车服务</p>
					</section>
					<div class="clear"></div>
				</div>
			</div>
			<div class="col-xs-12 row service-container-body">
				<div class="col-xs-12 row service-container-row">
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/insurance.png" />
						<p class="col-xs-9">驾驶证业务</p>
					</section>
					<section class="col-xs-6 row service-container-item">
						<img class="col-xs-3 " src="img/ui/accumulationFund.png" />
						<p class="col-xs-9">加油充电</p>
					</section>
					<div class="clear"></div>
				</div>
			</div>

		</div>

	</body>

</html>